<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.adminset') }}</h2>
        </template>
        <template v-slot:after>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="primary" icon="el-icon-edit" :disabled="!checkPermission('admin-save')" @click="btnOk">保存</el-button>
        </template>
      </PageTitle>
      <el-row :span="24" style="margin-top: 20px;">
        <el-form ref="ruleForm" :model="list" label-width="180px" :rules="rules" style="max-height: 750px;overflow-y: auto;">
          <el-form-item label="系统名称" prop="name">
            <el-input v-model="list.name" style="width: 10%;" placeholder="请输入系统名称" />
          </el-form-item>
          <el-form-item label="logo" prop="logo">
            <ImageUpload ref="staffPhoto" />
          </el-form-item>
          <el-form-item label="首页背景图" prop="index_bj">
            <ImageUpload ref="bjPhoto" />
          </el-form-item>
          <el-form-item label="会员中心背景图" prop="user_bj">
            <ImageUpload ref="userPhoto" />
          </el-form-item>
          <el-form-item label="会员中心Vip入口" prop="vip_img">
            <ImageUpload ref="vipPhoto" />
          </el-form-item>
          <el-form-item label="余额背景图" prop="balance_img">
            <ImageUpload ref="balancePhoto" />
          </el-form-item>
          <el-form-item label="手机号" prop="tel">
            <el-input v-model="list.tel" style="width: 15%;" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="客服链接" prop="kfurl">
            <el-input v-model="list.kfurl" style="width: 30%;" placeholder="请输入客服链接" />
          </el-form-item>
          <el-form-item label="公司地址">
            <ChinaArea ref="Address" />
            <el-input v-model="list.address" placeholder="请输入详细地址" style="width:30%;margin-top: 10px;" />
          </el-form-item>
          <el-form-item label="纬度" prop="latitude">
            <el-input v-model="list.latitude" style="width: 10%;" placeholder="请输入纬度" />
          </el-form-item>
          <el-form-item label="经度" prop="longitude">
            <el-input v-model="list.longitude" style="width: 10%;" placeholder="请输入经度" />
          </el-form-item>
          <el-form-item label="自动关闭订单时间(秒)" prop="autoclose">
            <el-input v-model.number="list.autoclose" style="width: 10%;" />
          </el-form-item>
          <el-form-item label="自动收货天数" prop="autoshdays">
            <el-input v-model.number="list.autoshdays" style="width: 10%;" />
          </el-form-item>
          <el-form-item label="预约自动完成(秒)" prop="yue_end">
            <el-input v-model.number="list.yue_end" style="width: 10%;" />
          </el-form-item>
          <el-form-item label="捐赠对象名称" prop="juan_name">
            <el-input v-model="list.juan_name" style="width: 25%;" />
          </el-form-item>
          <el-form-item label="捐赠比例" prop="juan">
            <el-input v-model.number="list.juan" style="width: 10%;" />%
          </el-form-item>
          <el-form-item label="积分抵扣" prop="longitude">
            <div class="item-box">
              <label style="margin: 0 10px;">每积分抵扣</label>
              <el-input v-model="list.score_money" style="width: 5%;" />
              <label style="margin: 0 10px;">元，最多抵扣百分比</label>
              <el-input v-model.number="list.scoredkmaxval" style="width: 5%;" />
              <label style="margin: 0 10px;">%，选择使用积分抵扣时，最多可抵扣订单额的百分之多少</label>
            </div>
          </el-form-item>
          <el-form-item label="首页是否弹窗" prop="is_tan">
            <el-radio-group v-model.number="list.is_tan" @input="tanRadio">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="2">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="list.is_tan==1" label="弹窗图" prop="弹窗图">
            <ImageUpload ref="tanfPhoto" />
          </el-form-item>
          <el-form-item v-if="list.is_tan==1" :label="$t('table.Gotopage')" prop="type_id">
            <el-select v-model.number="list.type_id" :placeholder="$t('table.selectThe')+' '+$t('table.Gotopage')" @change="change">
              <el-option v-for="(item,index) in listApp" :key="index" :label="item.name" :value="item.id" />
              <el-option :label="$t('table.Web')" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="list.type_id!==0&&list.is_tan==1" :label="$t('table.Parameter')" prop="parameter">
            <el-input v-model="list.parameter" style="width: 30%;" :placeholder="$t('table.enterThe')+' '+$t('table.Parameter')" />
          </el-form-item>
          <el-form-item v-if="list.type_id===0&&list.is_tan==1" :label="$t('table.hrefurl')" prop="page">
            <el-input v-model="list.page" style="width: 50%;" :placeholder="$t('table.enterThe')+' '+$t('table.hrefurl')" />
          </el-form-item>
          <el-form-item label="公司简介">
            <RichText ref="child" :values="list.desc" style="width:50%" />
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
import { GetAdminSet, EditAdminSet, getAppPage } from '@/api/user'
export default {
  data() {
    return {
      list: {},
      listApp: [],
      rules: {
        name: [{ required: true, message: '系统名称不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getUserAdmin()
    this.getAppList()
  },
  methods: {
    // 监听单选
    tanRadio() {

    },
    // 获取选择的值
    change(e) {
      this.listApp.forEach(element => {
        if (e === 0) {
          this.formData.type = 3
          return
        }
        if (element.id === e) {
          this.list.type = element.type
          this.list.page = element.page
          this.list.url_type = element.url_type
        }
      })
    },
    // 获取系统基本设置
    async getUserAdmin() {
      const one = {
        id: 1
      }
      const { list } = await GetAdminSet(one)
      this.list = list
      console.log(this.list)
      this.openDialog()
    },
    // 获取页面列表
    async getAppList() { // 请求数据
      const one = {
        aid: 38,
        id: undefined
      }
      const { list } = await getAppPage(one)
      this.listApp = list
    },
    // 点击确定时
    async btnOk() {
      try {
        // 校验整个表单
        await this.$refs.ruleForm.validate()
        // 读取上传组件的数据
        const fileList = this.$refs.staffPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.list = { ...this.list, logo: fileList && fileList.length ? fileList[0].url : '' }
        // 读取上传组件的数据
        const fileList1 = this.$refs.bjPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList1.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.list = { ...this.list, index_bj: fileList1 && fileList1.length ? fileList1[0].url : '' }

        // 读取上传组件的数据
        const fileList2 = this.$refs.tanfPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList2.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.list = { ...this.list, tan_img: fileList2 && fileList2.length ? fileList2[0].url : '' }

        // 读取上传组件的数据
        const fileList3 = this.$refs.userPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList3.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.list = { ...this.list, user_bj: fileList3 && fileList3.length ? fileList3[0].url : '' }

        // 读取上传组件的数据
        const fileList4 = this.$refs.vipPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList4.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.list = { ...this.list, vip_img: fileList4 && fileList4.length ? fileList4[0].url : '' }
        // 读取上传组件的数据
        const fileList5 = this.$refs.balancePhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList5.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.list = { ...this.list, balance_img: fileList5 && fileList5.length ? fileList5[0].url : '' }
        // 获取富文本编辑内容
        const oldProcedure = this.$refs.child.getVal()
        this.list.desc = oldProcedure
        // 获取省市区
        const selectedOptions = this.$refs.Address.selectedOptions
        this.list.province = selectedOptions[0]
        this.list.city = selectedOptions[1]
        this.list.district = selectedOptions[2]
        // 调用新增接口
        await EditAdminSet(this.list)
        // 更新数据
        this.getUserAdmin()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 给图片赋值
    openDialog() {
      if (this.list.logo) {
        this.$refs.staffPhoto.fileList = [{ url: this.list.logo, upload: true }]
      }
      if (this.list.index_bj) {
        this.$refs.bjPhoto.fileList = [{ url: this.list.index_bj, upload: true }]
      }
      if (this.list.desc) {
        this.$refs.child.content = this.list.desc
      }
      if (this.list.district) {
        this.$refs.Address.selectedOptions = [this.list.province, this.list.city, this.list.district]
      }
      if (this.list.tan_img) {
        this.$refs.tanfPhoto.fileList = [{ url: this.list.tan_img, upload: true }]
      }
      if (this.list.user_bj) {
        this.$refs.userPhoto.fileList = [{ url: this.list.user_bj, upload: true }]
      }
      if (this.list.vip_img) {
        this.$refs.vipPhoto.fileList = [{ url: this.list.vip_img, upload: true }]
      }
      if (this.list.balance_img) {
        this.$refs.balancePhoto.fileList = [{ url: this.list.balance_img, upload: true }]
      }
    }
  }
}
</script>
<style lang="scss">
  .el-table{
    margin-top:30px
  }
</style>
